<template>
  <div class="my">
    <van-sticky>
      <van-nav-bar
        title="个人中心"
        left-text="返回"
        right-text="设置"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
        class="vnb"
      />
    </van-sticky>

    <div class="top">
      <img :src="list.avatar" @click="showlist" />

      <p>{{ list.userName }}</p>
      <p>{{ list.nickName }}</p>
      <van-button type="default" size="mini" @click="showlist"
        >修改个人资料</van-button
      >
    </div>
    <div class="footer">
      <p @click="$router.push('/address')">
        <van-icon name="map-marked" color="black" size="20" class="v-i" /><span
          >收货地址管理</span
        >
        <van-divider :hairline="false" />
      </p>
      <p>
        <van-icon name="todo-list" color="skyblue" size="20" class="v-i" /><span
          >我的订单</span
        >
        <van-divider :hairline="false" />
      </p>
      <p>
        <van-icon name="coupon" color="gold" size="20" class="v-i" /><span
          >我的代金券</span
        >
        <van-divider :hairline="false" />
      </p>
      <p>
        <van-icon name="label" color="pink" size="20" class="v-i" /><span
          >我的收藏</span
        >
        <van-divider :hairline="false" />
      </p>
      <p>
        <van-icon name="shop" color="gray" size="20" class="v-i" /><span
          >灰灰之家</span
        >
        <van-divider :hairline="false" />
      </p>
      <p>
        <van-icon
          name="smile-comment"
          color="green"
          size="20"
          class="v-i"
        /><span>服务中心</span>
        <van-divider :hairline="false" />
      </p>
      <p>
        <van-icon name="vip-card" color="yellow" size="20" class="v-i" /><span
          >我的VIP</span
        >
        <van-divider :hairline="false" />
      </p>
      <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { removeToken } from "@/utils/auth";
import { getUserAPI } from "@/api/user";
import { Toast } from "vant";

export default {
  components: {},
  data() {
    return {
      show: false,

      actions: [
        { name: "退出当前账号", click: "out" },
        { name: "退出并清空当前账号记录", click: "remove" },
        { name: "更改密码", click: "editpassword" },
      ],
      list: {
        userName: "",
        nickName: "",
        password: "",
      },
    };
  },
  computed: {},
  watch: {},

  methods: {
    // 获取用户信息
    async getuser() {
      const result = await getUserAPI();
      console.log(result);
      if (result.avatar == "") {
        result.avatar =
          "https://img0.baidu.com/it/u=3730772664,138405132&fm=26&fmt=auto";
      }

      this.list = result;
    },
    //点击返回
    onClickLeft() {
      this.$router.go(-1);
    },
    // 点击退出弹出账户选项
    onClickRight() {
      this.show = true;
    },
    // 点击退出选项判断选项id  id为1  仅退出  id为0清空并退出
    onSelect(v) {
      console.log(v);
      if (v.click === "out") {
        removeToken();
        Toast("当前账号已退出");

        this.$router.push("/login");
      } else if (v.click === "remove") {
        removeToken();
        localStorage.removeItem("user");
        Toast("当前账号登录记录已清空");

        this.$router.push("/login");
      } else if (v.click === "editpassword") {
        this.$router.push("/editpassword");
      }

      this.show = false;
    },
    showlist() {
      this.$router.push("/edituser");
    },
  },

  created() {
    //判断是否登陆未登录打回去
    if (!getToken()) {
      this.$router.push("/edituser");
    }
    //
    this.getuser();
  },
  mounted() {},
};
</script>
<style lang="less" scoped >
.vnb {
  background-color: #dbdbdb;
}
.my {
  margin-bottom: 50px;

  .top {
    padding: 20px;
    background-image: url(https://img2.baidu.com/it/u=78576290,1516732254&fm=26&fmt=auto);
    text-align: center;

    img {
      width: 100px;
      height: 100px;
      border-radius: 50px;
    }
  }
  .footer {
    p {
      .v-i {
        margin-left: 15px;
      }
      span {
        margin-left: 25px;
      }
    }
  }
}
</style>
